<template>
  <div class="cy-menu-warp" :class="'cy-menu-warp-' + $props.menuDirection">
    <div class="cy-menu-item" :id="'cyAuchorMenu' + item.key" v-for="(item) in data" >
      <a :class="{ 'cy-menu-active': $props.modelValue == item.key }" class="cy-menu-a menu-item-dot"  @click="choseOneMenu(item)">{{ item.name }}</a>
      <template v-if="item.children && item.children.length">
        <menuListItem :mValue="modelValue" :data="item.children" @choseOneMenu="choseOneMenu"></menuListItem>
      </template>
    </div>
  </div>
</template>

<script setup>
import menuListItem from './menuListItem.vue'
const props = defineProps({
  data: Array,
  modelValue: [String, Number],
  menuDirection: {
    type: String, // column,row
    default: 'column'
  },
  anchorHref: {
    type: Boolean,  
    default: false
  }
})
const emit = defineEmits(['update:modelValue', 'choseMenu'])
// 点击菜单
const choseOneMenu = (info) => {
  emit('update:modelValue', info.key)
  emit('choseMenu', info.key)
}
</script>
<script>
export default {
  name: 'AnchorMenu'
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>